<template>
  <div class="app-container ">
    <el-form ref="form" size="mini" :model="form" :rules="rules" label-width="100px">
      <el-tabs v-model="activeName">
        <el-tab-pane style="padding-top:10px" label="收款码" name="收款码">
          <el-row>
            <el-col :span="24">
              <el-form-item label="">
                <el-image v-if="form.qrcodeurl" class="table_list_pic" :src="form.qrcodeurl" />
                <div class="help-block">
                  如果下载不了，可以直接在收款码上右键》图片另存为
                </div>
              </el-form-item>
              <el-form-item>
                <div style="padding-left: 80px;"><el-button size="mini" type="primary" @click="downFileUrl">下载收款码</el-button></div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>
<script>
  export default {
    name: 'printerindex',
    components: {},
    data() {
      return {
        form: {},
        PinpaiType: {},
        loading: false,
        activeName: '收款码',
        rules: {}
      }
    },
    mounted() {
      this.$api.post('/paymentcode/index').then(res => {
        this.form = JSON.stringify(res.data) == '[]' ? {} : res.data
      })
    },
    methods: {
      downFileUrl() {
        var img = this.form.qrcodeurl;
        const url = img;
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", url, true);
        xmlhttp.responseType = "blob";
        xmlhttp.onload = function() {
          if (this.status == 200) {
            const blob = this.response;
            const link = document.createElement("a");
            link.href = window.URL.createObjectURL(blob);
            link.download = '收款码' + url.substring(url.lastIndexOf(".") + 1, url.length);
            //此写法兼容可火狐浏览器
            document.body.appendChild(link);
            const evt = document.createEvent("MouseEvents");
            evt.initEvent("click", false, false);
            link.dispatchEvent(evt);
            window.URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
          }
        };
        xmlhttp.send();
      },
    }
  }
</script>
<style scoped>
  .table_list_pic {
    width: 260px;
    height: 260px;
    vertical-align: middle;
  }
</style>
